<template>
	<view class="page-main">
		<view class="container">
			<view class="header">
				<view class='login_btn' v-if="!userId">
					<image src='/static/login_btn_bg.png'></image>
					<text>点击登录</text>
					<button open-type="getUserInfo" bindgetuserinfo="onGotUserInfo"></button>
				</view>
				<view class="user-info" v-if="userId">
					<image :src="userImg" class="userPhoto"></image>
					<view>
						<view>{{userName}}</view>
						<view class="userId">ID:{{userId}}</view>
					</view>
				</view>
			</view>
			<view class="infoList">
				<view class="infoListBlock">
					<navigator url="/pages/mine/orderRecord">
						<view>
							<image src="/static/gameRecord.png"></image>
							<text>订单记录</text>
						</view>
						<image src="/static/btn_left.png"></image>
					</navigator>
					<navigator url="/pages/mine/rechargeRecord">
						<view>
							<image src="/static/myRecharge.png"></image>
							<text>我的充值</text>
						</view>
						<image src="/static/btn_left.png"></image>
					</navigator>
					<navigator url="/pages/mine/store">
						<view>
							<image src="/static/store_selected.png"></image>
							<text>场地</text>
						</view>
						<image src="/static/btn_left.png"></image>
					</navigator>
				</view>
				<view class="infoListBlock">
					<navigator url="/pages/mine/callCenter">
						<view>
							<image src="/static/service.png"></image>
							<text>客服中心</text>
						</view>
						<image src="/static/btn_left.png"></image>
					</navigator>
				</view>
			</view>
		</view>
		<ad class="ad" unit-id="adunit-800621466b6a1f78" ad-type="grid" grid-opacity="0.8" grid-count="5" ad-theme="white">
		</ad>
		<tabbar :currentTab='2' :type="0" :scroll="scroll" ref="child" @scrollTop="scrollTop" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollLeft: 0, //滑动距离
				scroll: 0,
				userId: '',
				userImg: ''
			}
		},
		onPageScroll(e) {
			this.$refs.child.printScroll(e.scrollTop);
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.header {
		width: 100%;
		height: 238rpx;
		background: url("https://wapstatic.xtqtech.com/mine_bg.png") no-repeat 100% 100%;
		background-size: cover;
		box-sizing: border-box;
		padding: 30rpx 30rpx 60rpx;
	}

	.login_btn {
		width: 240rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 4px;
		position: relative;
		margin: 40rpx auto;
	}

	.login_btn>image {
		position: absolute;
		top: 24rpx;
		left: 28rpx;
		width: 30rpx;
		height: 32rpx;
	}

	.login_btn>text {
		position: absolute;
		top: -10rpx;
		left: 74rpx;
		/* margin-left: 16rpx; */
		font-size: 16px;
		font-weight: bold;
		color: #FE7606;
		line-height: 100rpx;
	}

	.login_btn>button {
		position: absolute;
		top: 0;
		left: 0;
		width: 240rpx;
		height: 80rpx;
		opacity: 0;
	}

	.user-info {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #fff;
	}

	.userPhoto {
		width: 130rpx;
		height: 130rpx;
		border: 8rpx solid #febf6f;
		border-radius: 50%;
		background: url("https://wapstatic.xtqtech.com/o_1bjmp1fj6ec6r9b1kqf1r5ooo2r.png") no-repeat 100% 100%;
		background-size: cover;
		margin-right: 40rpx;
	}

	.userId {
		margin-top: 10rpx;
	}

	.infoList {
		width: 100%;
	}

	.infoListBlock:first-child {
		margin-top: 0;
	}

	.infoListBlock {
		margin-top: 30rpx;
	}

	.infoListBlock navigator {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 34rpx;
		background: #fff;
		height: 92rpx;
		border-bottom: 1px solid #eee;
	}

	.infoListBlock navigator>view {
		display: flex;
		align-items: center;
	}

	.infoListBlock navigator view image {
		width: 46rpx;
		height: 46rpx;
		vertical-align: middle;
		margin-right: 54rpx;
	}

	.infoListBlock navigator view text {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #333;
		letter-spacing: 0;
	}

	.infoListBlock navigator view {
		display: flex;
		align-items: center;
	}

	.infoListBlock navigator image {
		width: 16rpx;
		height: 26rpx;
	}

	.ad {
		margin-top: 15px;
		margin-bottom: 15px;
	}
</style>